/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-13 14:56:49
 * @LastEditTime: 2023-04-14 10:01:52
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Box,
  Button,
  FormControl,
  FormErrorMessage,
  FormLabel,
  Heading,
  Input,
  Stack,
  useColorModeValue,
  useToast,
} from '@chakra-ui/react';
import { Field, FieldProps, Formik } from 'formik';
import { useTranslation } from 'react-i18next';

// import { setIsLogin, setUserInfo } from '@/store/user';
import { useAppSelector } from '@/store/hooks';
// import { useState } from 'react';

export default function Password() {
  const { t } = useTranslation();
  const { loading } = useAppSelector((state) => state.user);
  const toast = useToast();

  const handleUpdate = (values: any) => {
    console.log('handleUpdatePassword', values);
    toast({
      position: 'top',
      description: '功能暂不可用！',
      status: 'warning',
      duration: 3000,
      isClosable: true,
    });
  };
  return (
    <Box
      w={{ base: '100%', md: '80%' }}
      mx="auto"
      rounded="lg"
      h="max-content"
      bg={useColorModeValue('white', 'gray.800')}
      boxShadow="lg"
      p={8}
    >
      <Heading fontSize="2xl" textAlign="center" mb="5">
        {t('profile.updatePassword')}
      </Heading>
      <Formik
        initialValues={{
          password: '',
          newPassword: '',
          confirmPassword: '',
        }}
        onSubmit={(values) => {
          handleUpdate(values);
        }}
      >
        {({ handleSubmit, errors, touched }) => (
          <form onSubmit={handleSubmit}>
            <Stack spacing={4}>
              <Field
                name="password"
                validate={(value: string) => {
                  let error;
                  if (!value) {
                    error = t('auth.passwordError');
                  }
                  return error;
                }}
              >
                {({ field }: FieldProps) => (
                  <FormControl
                    isRequired
                    isInvalid={Boolean(errors.password && touched.password)}
                  >
                    <FormLabel fontWeight="600" htmlFor="password">
                      {t('profile.currentPassword')}
                    </FormLabel>
                    <Input
                      id="password"
                      type="text"
                      variant="filled"
                      {...field}
                      placeholder={t('profile.currentPasswordPlaceholder')}
                    />
                    <FormErrorMessage>
                      {errors.password as string}
                    </FormErrorMessage>
                  </FormControl>
                )}
              </Field>
              <Field
                name="newPassword"
                validate={(value: string) => {
                  let error;
                  if (!value) {
                    error = t('profile.newpasswordIsrequired');
                  }
                  return error;
                }}
              >
                {({ field }: FieldProps) => (
                  <FormControl
                    isRequired
                    isInvalid={Boolean(
                      errors.newPassword && touched.newPassword
                    )}
                  >
                    <FormLabel fontWeight="600" htmlFor="newPassword">
                      {t('auth.newPassword')}
                    </FormLabel>
                    <Input
                      id="newPassword"
                      type="text"
                      variant="filled"
                      {...field}
                      placeholder={t('profile.newPasswordPlaceholder')}
                    />
                    <FormErrorMessage>
                      {errors.newPassword as string}
                    </FormErrorMessage>
                  </FormControl>
                )}
              </Field>
              <Field
                name="confirmPassword"
                validate={(value: string) => {
                  let error;
                  if (!value) {
                    error = t('profile.passwordConfirmError');
                  }
                  return error;
                }}
              >
                {({ field }: FieldProps) => (
                  <FormControl
                    isRequired
                    isInvalid={Boolean(errors.confirmPassword)}
                  >
                    <FormLabel fontWeight="600" htmlFor="confirmPassword">
                      {t('profile.confirmPassword')}
                    </FormLabel>
                    <Input
                      id="confirmPassword"
                      type="text"
                      variant="filled"
                      {...field}
                      placeholder={t('profile.confirmPasswordPlaceholder')}
                    />
                    <FormErrorMessage>
                      {errors.confirmPassword as string}
                    </FormErrorMessage>
                  </FormControl>
                )}
              </Field>
              <Stack spacing={10} pt="3">
                <Button
                  isLoading={loading}
                  loadingText="Submitting"
                  type="submit"
                >
                  {t('profile.updatePasswordNow')}
                </Button>
              </Stack>
            </Stack>
          </form>
        )}
      </Formik>
    </Box>
  );
}
